<template>
	<view class="page">
		<view class="tabs">
			<view class="tab" :class="type==1?'active':''" @click="chageType(1)">
				邀请中
			</view>
			<view class="tab" :class="type==2?'active':''" @click="chageType(2)">
				被邀请
			</view>
			<view class="tab" :class="type==3?'active':''" @click="chageType(3)">
				已同意
			</view>
		</view>
		<view class="card">
			<view class="user-msg" v-for="(item,index) in lists" @click="toInviteDetail(item.uid)">
				<image class="tx" :src="item.avatar"></image>
				<view class="msg">
					<view class="name">
						{{item.nickname}}
					</view>
					<view class="status">
						{{type ==1?'邀请中':type==2?'被邀请':'已同意'}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				lists: []
			};
		},
		onLoad(o) {
			this.type = o.type
			this.getList()
		},
		methods: {
			getList() {
				this.$api.user.yq_list({
					status: this.type
				}).then(res => {
					this.lists = res.data.user
				})
			},
			chageType(e) {
				this.type = e
				this.lists = []
				this.getList()
			},
			toInviteDetail(id) {
				uni.navigateTo({
					url: "/pages/mine/inviteDetail?uid=" + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		min-height: 100vh;
		background-color: #F7F7F7;
		padding: 0 32rpx;

		.tabs {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 114rpx;

			.tab {
				height: 100%;
				font-size: 28rpx;
				color: #454545;
				position: relative;
				line-height: 114rpx;

				&.active {
					color: #F4BD38;
					font-size: 32rpx;
					font-weight: bold;

					&::after {
						content: "";
						position: absolute;
						bottom: 22rpx;
						width: 50rpx;
						height: 6rpx;
						background: #F4BD38;
						border-radius: 3rpx;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}

		.card {
			width: 100%;
			box-shadow: 0px 1px 4rpx 0px rgba(190, 190, 190, 0.35);
			background: #FFFFFF;
			border-radius: 14rpx;
			margin-bottom: 18rpx;
			padding: 0 32rpx;

			.user-msg {
				display: flex;
				width: 200%;
				padding: 40rpx 0;
				border-bottom: 1px solid #ECECEC;

				&:last-child {
					border-bottom: 1px solid transparent;
				}

				.tx {
					width: 120rpx;
					height: 120rpx;
					flex-shrink: 0;
					margin-right: 24rpx;
					border-radius: 50%;
				}

				.msg {
					.name {
						margin-top: 18rpx;
						font-size: 28rpx;
						font-weight: bold;
						margin-bottom: 10rpx;
					}

					.status {
						color: #F4BD38;
					}
				}
			}
		}
	}
</style>